<template>
  <div class="page-wrap">
    <div style="color: rgb(27, 76, 184); margin-bottom: 15px">
      <div class="addressIcon"></div>
      <span>当前位置：</span>
      <span style="cursor: pointer" @click="returnCompanyList"> 实网演练 </span>
      <Icon type="ios-arrow-forward" color="rgb(27, 76, 184)" size="16" />
      <span style="cursor: pointer" @click="returnCompany">
        {{ this.$route.query.name }}
      </span>
      <Icon type="ios-arrow-forward" color="rgb(27, 76, 184)" size="16" />
      <span style="color: #333">{{
        this.$route.query.sceneName || "文件分析"
      }}</span>
    </div>
    <div
      class="page-content"
      :style="{
        height: contentHei === 'auto' ? contentHei : `${contentHei}px`,
      }"
    >
      <div class="img-header">
        <Button
          style="margin-right: 15px"
          type="primary"
          ghost
          @click="returnCompany"
        >
          <Icon type="md-arrow-back" />
          返回
        </Button>
        <!-- <div style="font-weight: 700; font-size: 18px">文件分析</div> -->
      </div>
      <div class="content-wrap">
        <sessionDetail />
        <Tabs
          v-if="false"
          class="demo-tabs-style2"
          @on-click="changeMonitorTab"
          :value="fileAnalysisDefault"
        >
          <TabPane label="概括" name="summarize">
            <summarize v-if="fileAnalysisDefault == 'summarize'" />
          </TabPane>
          <!-- <TabPane label="流量分析" name="flowAnalysis">
            <div>流量分析</div></TabPane
          >
          <TabPane label="负载量" name="capacity">
            <div>负载量</div>
          </TabPane>
          <TabPane label="性能" name="performance">
            <div>性能</div>
          </TabPane>
          <TabPane label="TCP指标" name="TCPMetrics">
            <div>TCP指标</div></TabPane
          >
          <TabPane label="访问关系" name="accessRelationship">
            <div>访问关系</div></TabPane
          >
          <TabPane label="重传分析" name="retransmissionAnalysis">
            <div>重传分析</div></TabPane
          >
          <TabPane label="建连分析" name="jianlianAnalysis">
            <div>建连分析</div></TabPane
          >
          <TabPane label="应用层协议分析" name="applicationAnalysis">
            <div>应用层协议分析</div></TabPane
          > -->
          <TabPane label="会话详单" name="sessionDetails">
            <sessionDetail v-if="fileAnalysisDefault == 'sessionDetails'" />
          </TabPane>
          <!-- <TabPane label="数据包" name="dataPacket">
            <div>数据包</div>
          </TabPane> -->
        </Tabs>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import SearchTable from '@/components/SearchTable/SearchTable';
import summarize from '@/view/flowAnalysis/components/summarize.vue'
import sessionDetail from '@/view/flowAnalysis/components/sessionDetails.vue'
export default {
  name:'fileAnalysis',
  components: { SearchTable,summarize,sessionDetail},
  data() {

    return {
      // 页面设置
      fullHeight: document.documentElement.clientHeight,
      fullWidth: document.documentElement.clientWidth,
      contentHei: 'auto',
      monitorDefault: 'networkBehavior',
      // 裁判禁用行为监控
      showMonitoring: false,
      queryParams: {
        pageIndex: 1,
        pageSize: 12,
        Dates: [],
        target: '',
      },
      packetTotal: 0,
      packetList: [],
      packetCol: [
        {
          title: '时间',
          key: 'time',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          placement: 'top-left',
          width: 120
        },
        {
          title: '源IP',
          key: 'IP',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 100,
          placement: 'top-left'
        },
        {
          title: '源端口',
          key: 'port',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 100,
          placement: 'top-left'
        },
        {
          title: '目的IP',
          key: 'port',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 100,
          placement: 'top-left'
        },
        {
          title: '目的端口',
          key: 'port',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 100,
          placement: 'top-left'
        },
        {
          title: '传输层协议',
          key: 'port',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 100,
          placement: 'top-left'
        },
        {
          title: 'tcpFlags',
          key: 'port',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 100,
          placement: 'top-left'
        },
        {
          title: 'VLANID',
          key: 'port',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 100,
        },
        {
          title: '总字节数',
          key: 'number',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 100,
          fixed: 'right',
        },
        {
          title: '应用',
          key: 'number',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 100,
          fixed: 'right',
        },
        {
          title: '应用层协议',
          key: 'number',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 100,
          fixed: 'right',

        },
      ],

      // 树型数据
      treeData: [
        {
          title: 'IPV4',
          expand: true,
          children: [
            {
              title: 'IPV4 1-1-1'
            },
            {
              title: 'IPV4 1-1-2'
            }
          ]
        },
        {
          title: 'IPV6',
          expand: true,
          children: [
            {
              title: 'IPV6 1-1-1'
            },
            {
              title: 'IPV6 1-1-2'
            }
          ]
        },
        {
          title: 'port',
          expand: true,
          children: [
            {
              title: 'port 1-1-1'
            },
            {
              title: 'port 1-1-2'
            }
          ]
        }
      ],
      fileAnalysisDefault:'summarize'
    }
  },
  computed: {
    ...mapState('board', ['newNotice'])
  },
  watch: {},
  created() {},
  async mounted() {
    this.setStyle();
    window.onresize = () => {
      this.setStyle();
    };
  },
  methods: {
    changeMonitorTab (val) {
      this.fileAnalysisDefault = val
    },
    getTargetPage (val) {
      this.queryParams.pageIndex = val
    },
    getTargetSize (size) {
       this.queryParams.pageSize = size;
    },

    // 选择时间
    clickOkBtn(){},
    clickClearBtn () {
      this.queryParams.Dates = []
    },
    changeDates (val) {
      console.log(' changeDates ~ val:', val)
    },
    // 条件
    changeTarget (val) {
      console.log('changeTarget ~ val:', val)
    },


    // 设置高度
    setStyle() {
      clearTimeout(this.refreshTimer);
      this.refreshTimer = setTimeout(() => {
        window.fullHeight = document.documentElement.clientHeight;
        window.fullWidth = document.documentElement.clientWidth;
        this.fullHeight = window.fullHeight;
        this.fullWidth = window.fullWidth;
        this.contentHei = this.fullHeight - 36 - 35; // 80是头部高度  35是上下padding 
        this.pageSize = Math.floor((this.contentHei - 167) / 96) || 1;
        // this.getReportList();
      }, 200);
    },
    // 返回详情
    returnCompany () {
      this.$router.push({
        path: '/hwDrillDetail',
        query: {
          name: this.$route.query.name,
          prjid: this.$route.query.prjid,
          id: this.$route.query.id,
          page: this.$route.query.page
        }
      });
    },

    // 返回列表
    returnCompanyList () {
      this.$router.push({
        path: '/hwDrill'
      });
    }
  }
};
</script>
<style scoped>
.page_center {
  margin-top: 15px;
  text-align: center;
}
.targetHeader {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin: 15px 0px;
}
.targetHeader_left {
  margin: 15px 0px;
  /* border-right: 1px solid #999; */
  /* height: calc(100vh - 13vh); */
}
.page-wrap {
  padding: 25px 25px 10px 25px;
}
.page-wrap-query /deep/ .ivu-cascader-rel .ivu-input {
  border-radius: 20px;
}
.reset-color /deep/ .ivu-select-selected-value {
  color: unset !important;
}
.page-content {
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}
.img-header {
  display: flex;
  /* justify-content: space-between; */
  padding: 20px 20px 0 20px;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
}
.addressIcon {
  display: inline-block;
  height: 14px;
  width: 12px;
  background: url("../../assets/globalIcon/addressIcon.png") no-repeat center;
  background-size: 100% 100%;
  margin-bottom: -1px;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.content-wrap {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 20px;
  flex: 1;
  height: 0;
  margin-bottom: 20px;
}
.content-wrap::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.content-wrap::-webkit-scrollbar-thumb {
  /*滚动条里面小方块样式*/
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(209, 209, 209, 0.6);
}
.content-wrap::-webkit-scrollbar-track {
  /*滚动条里面轨道样式*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background: rgba(179, 179, 179, 0.1);
}
</style>
